{% extends "baseUser.html" %}

{% block userData %}
	<div class="page-header">
		<div class="row">
			<div class="col-md-10">
				<h1>Tracker</h1>
			</div>
		</div>
	</div>

	<div class="container">
		<div class="row">
		
			{% with messages = get_flashed_messages() %}
			  {% if messages %}
			    <div class="alert alert-info">
			    {% for message in messages %}
			      {{ message }}
			    {% endfor %}
			    </div>
			  {% endif %}
			{% endwith %}
		
			<div class="col-md-12">
				<div id="wrap">
					
					<select class="form-control" id="deportes" name="deportes" placeholder="Deportes" type="text">
					<option selected value="__None">-- Select --</option>
					
					 {% for deporte in deportes_del_usuario %}
						{% set check = '' %}
						{% if deporte in deportes_del_usuario %}									
							{% set check = 'checked' %}
						{% endif %}
						<option value="{{deporte.id}}">{{deporte.nombre}}</option>
						
					{% endfor %}
					</select>
					
				    <div id="status" class="stopped"><p>Not tracking</p></div>
				    <!-- Button trigger modal -->
				    <button id="startstop" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Start tracking</button>
				</div>
							
			</div>
		</div>
	</div>
	
		
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <h4 class="modal-title" id="myModalLabel">Trackeando</h4>
	      </div>
	      <div class="modal-body">

			<div class="row">
				<div class="col-xs-6 col-md-4">
				Velocidad:
				<div id="velocidad">--</div>
			</div>				
				
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Ocultar informacion</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
{% endblock %}

{% block js_footer %}
	{{ super() }}
	<script src="http://localhost:8080/socket.io/socket.io.js"></script>
	<script src="/static/mobileTracker/mobile_app/app.js"></script>
{% endblock %}
